{% extends 'common/layout.html' %}


{% block css %}
    <style>
        #usercenter_layout {
            display: flex;
            height: 100%;
        }

        .menu {
            background-color: #333;
            width: 200px;
            height: 90vh;
            overflow: auto;
            padding: 10px;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
        }

        .menu a {
            display: block;
            color: white;
            text-decoration: none;
            padding: 10px;
            margin-bottom: 5px;
            border-radius: 4px;
        }

        .menu a:hover {
            background-color: #575757;
        }

        .content {
            flex: 1;
            padding: 20px;
        }

        iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .menu-item {
            color: #000; /* 默认颜色 */
            text-decoration: none; /* 去掉下划线 */
            padding: 10px;
        }

        .menu-item.active {
            color: #03a9f4; /* 点击后的颜色 */
            font-weight: bold; /* 可选：加粗 */
        }
        .layui-row{
            display: none;
        }


    </style>
{% endblock %}


{% block content %}
    <div style="margin-left: 90%;margin-top:10px">
                <button class="layui-btn layui-btn-primary"><a href="{% url 'login:退出' %}">退出</a></button>

    </div>
    <div id="usercenter_layout">
        <div class="menu" >
            <a href="{% url 'manager:用户管理' %}" target="content-frame" class="menu-item">用户管理</a>
            <a href="{% url 'manager:商品管理' %}" target="content-frame" class="menu-item">商品管理</a>
            <a href="{% url 'manager:评分管理' %}" target="content-frame" class="menu-item">评分管理</a>
            <a href="{% url 'manager:购物商品管理' %}" target="content-frame" class="menu-item">收藏管理</a>
        </div>

        <div class="content">
            <iframe name="content-frame" src="{% url 'manager:用户管理' %}"></iframe>
        </div>
    </div>

{% endblock %}


{% block js %}
    <script>
        const menuItems = document.querySelectorAll('.menu-item');

        menuItems.forEach(item => {
            item.addEventListener('click', function () {
                menuItems.forEach(i => i.classList.remove('active')); // 移除其他项的样式
                this.classList.add('active'); // 添加当前项的样式
            });
        });
    </script>
{% endblock %}

